<template>
  <div class="detail">
    <van-nav-bar  title="店铺" left-text="返回"  left-arrow @click-left="backnext"/>
    <div class="one" :style="{background:`url(${shopinfo.info  &&  shopinfo.info.poi_back_pic_url})`}">
      <div class="name">  
        <img :src="shopinfo.info && shopinfo.info.picUrl" alt="">
        <span style="margin-bottom: 15px;">{{ shopinfo.info && shopinfo.info.name}}</span>
        <div class="like">
          <van-icon name="like" @click="likes" />
        </div>
      </div>
        <div class="inpu">
          <input type="text" placeholder="搜索">
          <span>点餐</span>
          <span>评价{{ shopinfo.info && shopinfo.info.wmPoiScore}}</span>
          <span>商家</span>
        </div>
        <div class="business">
          <span>商家配送{{shopinfo.info && shopinfo.info.deliveryTimeTip}}</span>
          <span>|</span>
          <span>距离{{shopinfo.info && shopinfo.info.distance}}</span>
        </div>
     
    </div>
    <div class="tew">
      <div class="left">
        <div @click="goodlist(index)" class="lefts" v-for="(item,index) in shopinfo.taglist" :key="index">{{item.name}}</div>
      </div>
      <div class="right">
        <div  class="item" v-for="(item,index) in shopinfo.taglist[currentIndex].goodlist" :key="index">
          <img :src="item.picture" alt="">
          <div class="right1">
            <div class="names">{{item.name}}</div>
            <span class="min_price">￥{{item.min_price}}</span>
            <span class="month_saled_content">{{item.month_saled_content}}</span>
            <span class="promotion_info">{{item.promotion_info}}</span>
            <span>{{item.unit}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { Toast } from 'vant';
import {shop_shopinfot ,shop_fav,shop_unfav} from "../api/api";
export default {
  name:'detail',
  data(){
    return{
      currentIndex:0,
      shopinfo:[],
      shouchangstatus:true,
      userid:null,
    
            }
  },
  methods:{
    goodlist(index){
      this.currentIndex=index
      console.log(index);
    },
    backnext(){
      this.$router.go(-1)
    },
    likes(){
      var userid= localStorage.getItem('userid')
      if( this.shouchangstatus==true){
        shop_fav({userid:userid,shopid:this.$route.params.id}).then((res)=>{
          Toast.success('收藏成功');
               console.log(res.data);
               console.log(this.$route.params.id);  
               this.shouchangstatus=false
        })
      }else if( this.shouchangstatus==false){
        shop_unfav({userid:userid,shopid:this.$route.params.id}).then((res)=>{
          console.log(res.data);
          console.log(this.$route.params.id);  
          
          this.shouchangstatus=true
          Toast.success('已取消收藏');
        })
      }
    }

  },
  mounted(){
    shop_shopinfot({params:{id:this.$route.params.id}}).then((res)=>{
      if(res.data.code==200){
        console.log(this.$route.params.id);
        console.log(res.data);
        this.shopinfo=res.data.shopinfo
      }else if(res.data.code==400){
        Dialog({ message: '该商家已倒闭' }).then(()=>{

          this.$router.go(-1)
        })
      }
        
    })
  }
}
</script>

<style scoped>
.like{
  text-align: right;
  font-size: 20px;
  margin-right: 10px;
}
.one{
  padding: 10px;
  background-size:cover ;
  color: white;
}
.name{
  margin-bottom: 20px;
  font-size: 18px;
}
.name img{
  width: 30.8px;
  height: 30.8px;
  vertical-align: middle;
  border-radius:50% ;
}
.inpu input{
  width: 80px;
  height: 25px;
  border-radius:30px ;
  text-align: center;
  margin-right: 20px;
}
.inpu span{
  margin-right: 20px;
}
.business{
  width: 345px;
  height: 70px;
  margin-top: 10px;
  background-color: white;
  color: black;
  border-radius:10px ;
  line-height: 50px;
}
.left{
  width: 35%;
  height: 380px;
  overflow: auto;
}
.lefts{
  margin-bottom: 20px;
}
.tew{
  display: flex;
}
.right{
  width: 65%;
  height: 350px;
  overflow:auto ;
}
.item img{
  width: 100px;
  height: 100px;
}
.item{
  display: flex;
  margin-bottom: 20px;
 
}
.right1 span{
margin-right: 5px;
}
</style>